<template>
	<view class="content">
		<u-navbar placeholder @leftClick="back" title="门票" leftIconColor="#FC2530">
		</u-navbar>
		<view class="bg" :style="{backgroundImage: 'url(' + imgUrl+scenicDetails.scenicPhoto+ ')'}">
		</view>
		<scroll-view class="body" :scroll-y="true" :scroll-x="false">
			<view style="padding: 0 30rpx;margin-bottom: 15rpx;">
				<view class="ticket">
					<view style="padding: 20rpx 40rpx;">
						<view class="scenicInfo">
							<u-text bold :text="scenicDetails.scenicBase.scenicName" size="38rpx" :lines="1"></u-text>
							<view>
								<u-button icon="photo" type="primary" size="mini" plain text="景区相册"
									@click="jump('/pages/index/scenicPhoto/details')"></u-button>
							</view>
						</view>
						<u-text :text="scenicOther.scenicDesc"></u-text>
					</view>
					<view class="address">
						<view class="address_left">
							<u-icon name="map-fill" color="#FC2530" :label="scenicDetails.scenicBase.scenicAddress">
							</u-icon>
						</view>
						<view class="address_right">
							<u-icon name="share" color="#FC2530" label="导航"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view style="padding: 0 30rpx;background-color: #fff;">
				<view class="buy">
					<u-text style="padding:15rpx 0 30rpx 0;" type="info" text="门票预约"></u-text>
					<view class="recommend">
						<view class="list">
							<view class="list_item" v-for="(item,index) in dataList" :key="index">
								<view class="item_body">
									<view class="body_left">
										<u-image :src="item.ticketImg|photoPrefix " radius="10px" width="350rpx" height="225rpx"
											:fade="true" duration="450"></u-image>
									</view>
									<view class="body_right">
										<view>
											<u-text size="38rpx" :text="item.ticketName" :lines="1"></u-text>
											<view>
												<!-- style="display: inline-block;" -->
												<u-tag v-for="items in item.ticketTag"
													style="display: inline-block;margin-right: 10rpx;" plainFill plain
													shape="circle" :text="items" size="mini" type="primary"></u-tag>
											</view>
											<!-- <u-text :lines="1" :text="item.scenicType"></u-text> -->
										</view>
										<view style="display: flex;justify-content: space-between;align-items: center;">
											<view class="money">
												<u-text size="38rpx" blod :text="'¥'+0" type="error"></u-text>
												<u-tag class="tag" style="display: inline-block;" shape="circle"
													:text="item.isEnable?'可退':'不可退'" size="mini" type="error"></u-tag>
											</view>
											<view class="buySubmit">
												<u-button size="large" type="primary" text="预约"
													@click="jump('/pages/index/scenicBuy/index?scenicId='+scenicDetails.scenicBase.id+'&item='+encodeURIComponent(JSON.stringify(item)))">
												</u-button>
											</view>
										</view>
									</view>
								</view>
								<u-divider v-if="index+1 != dataList.length"></u-divider>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="background-color: #fff;">
				<u-text style="padding:30rpx;" type="info" text="产品介绍"></u-text>
				<img v-for="item in scenicImg" width="100%" :src="item.imgUrl|photoPrefix" alt="">
			</view>
			<view style="background-color: #fff;">
				<view style="padding:0 30rpx">
					<u-text style="padding:30rpx 0;" type="info" text="购票须知"></u-text>
					<u-text :text="scenicOther.scenicInstruction"></u-text>
				</view>
			</view>
			<view style="background-color: #fff;">
				<view style="padding:0 30rpx 30rpx 30rpx">
					<u-text style="padding:30rpx 0;" type="info" text="退改规则"></u-text>
					<u-text :text="scenicOther.noticeOfRefund"></u-text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '@/api/index'
import { log } from '../../../js_sdk/uni-simple-router/helpers/warn';
	export default {
		data() {
			return {
				scenicDetails: {},
				scenicOther:{},
				scenicImg:[],
				imgUrl: '',
				dataList: [
				],
			}
		},
		onLoad(option) {
			this.scenicDetails = JSON.parse(decodeURIComponent(option.item));
			this.imgUrl = BASE_URL
		},
		mounted() {
			this.getOther(this.scenicDetails.scenicBase.id)
			this.getImg(this.scenicDetails.scenicBase.id)
			this.getTicket(this.scenicDetails.scenicBase.id)
		},

		methods: {
			getOther(id) {
				this.$api({
					url: '/business/getScenicOther/' + id,
					method: 'get'
				}).then((res) => {
					this.scenicOther = res.data
				})
				
			},
			getImg(id){
				this.$api({
					url:'/business/getScenicImgById/'+id,
					method: 'get'
					}).then((res) => {
						this.scenicImg = res.data
					})
			},
			getTicket(id){
				this.$api({
					url:'/business/getTicket/'+id,
					method: 'get'
					}).then((res) => {
						this.dataList = res.data.data.map(r=>{
							r.ticketTag=r.ticketTag.split(',')
							return r
						})
					})
			},
			jump(item) {
				uni.navigateTo({
					url: item
				})
			},
			back() {
				uni.navigateBack({
					delta: 2
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-tag--mini[data-v-3732d7af] {
		padding: 0 30rpx;
	}

	::v-deep .u-button[data-v-2bf0e569]:before {
		background-color: $u-primary-dark;
	}

	.content {
		.bg {
			background-image: url('https://cdn.uviewui.com/uview/swiper/swiper1.png');
			background-position: center center;
			background-size: cover;
			background-repeat: no-repeat;
			width: 100%;
			height: 380rpx;
			position: fixed;
		}

		.body {
			// padding: 0 30rpx;
			margin-top: -70rpx;

			// width: 100%;
			.ticket {
				margin-top: 380rpx;
				--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
				box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
				border-radius: 20rpx;
				width: 100%;
				background-color: #fff;

				.scenicInfo {
					display: flex;
					padding-bottom: 20rpx;
				}

				.address {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 40rpx;
					// width: 100%;
					border-bottom-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
					background-color: $u-primary-light;

					.address_left {
						flex: 1;
					}

					.address_right {
						// flex: 0;
					}
				}
			}

			.buy {

				// background-color: #fff;
				.recommend {

					.list {

						.item_body {
							display: flex;

							.body_right {
								width: 100%;
								padding: 0 25rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;

							}
						}
					}
				}
			}
		}
	}
</style>
